<template>
	<view class="detail-content-wrap full box relative bg-white flex column">
		<view class="article-header">
			<text>{{ title }}</text>
		</view>
		<view class="relative flex-1 box w-100">
			<view class="absolute inset">
				<scroll-view class="full" scroll-y>
					<view class="article-content">
						<u-parse :content="content"></u-parse>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="article-footer">
			<view class="action-item" @click="actionHandle('like')">
				<u-icon :name="isLike ? 'thumb-up-fill' : 'thumb-up'" size="32"
					:color="isLike ? '#3E94EC' : '#1A1A1A'"></u-icon>
			</view>
			<view class="action-item" @click="actionHandle('collect')">
				<u-icon :name="isCollect ? 'star-fill' : 'star'" size="32"
					:color="isCollect ? '#3E94EC' : '#1A1A1A'"></u-icon>
			</view>
			<button open-type="share" class="action-item share" @click="shareHandle">
				<u-icon name="share-square" size="32" color="#1A1A1A"></u-icon>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		onShareTimeline() {
			const {
				title,
				coverImage: image,
				id,
			} = this
			return {
				title,
				// imageUrl: image,
				query: `id=${id}`
			}
		},
		onShareAppMessage() {
			const {
				title,
				id,
				coverImage: image
			} = this
			return {
				title,
				path: '/pages-bundle/article-detail/index?id=' + id,
				// imageUrl: image
			}
		},
		onLoad(ev) {
			this.openWxShare()
			if (!ev.hasOwnProperty('id')) {
				return this.$toast({
					title: '参数错误'
				}, () => {
					uni.navigateBack()
				})
			}
			if (ev.hasOwnProperty('event')) {
				const {
					event
				} = ev
				this.event = !!event
			}
			const {
				id
			} = ev
			this.id = id
			this.initData(id)
		},
		methods: {
			shareHandle() {

			},
			async actionHandle(type) {
				const {
					isLike,
					isCollect,
					id
				} = this
				const typeEnum = {
					like: {
						url: isLike ? '/article/cancelLike' : '/article/addLike',
						msg: isLike ? '取消点赞' : '点赞成功',
						key: 'isLike',
						value: !isLike,
					},
					collect: {
						url: isCollect ? '/article/cancelCollect' : '/article/addCollect',
						msg: isCollect ? '取消收藏' : '收藏成功',
						key: 'isCollect',
						value: !isCollect,

					}
				}
				const target = typeEnum[type]
				if (!target) return
				const resp = await this.$request({
					url: target.url,
					data: {
						id
					},
				})
				const {
					code,
					msg
				} = resp
				this.$toast({
					title: code === 1 ? target.msg : msg
				})
				if (code !== 1) return
				this[target.key] = target.value
				if (this.event && type === 'collect') {
					uni.$emit('collectChange', {
						type: 2
					})
				}
			},
			async initData(id) {
				const resp = await this.$request({
					url: "/article/detail",
					data: {
						id
					},
					method: 'GET',
				})
				const {
					code,
					data,
					msg
				} = resp
				if (code !== 1) return this.$toast({
					title: msg
				}, () => {
					uni.navigateBack()
				})
				const {
					content,
					title,
					collect,
					like
				} = data
				this.content = content
				this.title = title
				this.isCollect = collect
				this.isLike = like
				console.log(resp, 'resp');
			},
		},
		data() {
			return {
				event: false,
				content: '',
				title: '',
				isCollect: false,
				isLike: false,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-content-wrap {
		padding: 16rpx 32rpx env(safe-area-inset-bottom);
		box-sizing: border-box;

		.article-footer {
			padding: 16rpx 0;
			display: flex;
			justify-content: center;
			gap: 0 80rpx;

			.action-item {
				&.share {
					height: unset;
					line-height: unset;
					width: fit-content;
					background: none;
					margin: unset;
					border: none;
					outline: none;
					padding: unset;

					&::after {
						box-shadow: none;
						outline: none;
						border: none;
					}
				}
			}
		}

		.article-header {
			font-size: 32rpx;
			color: rgba(0, 0, 0, 0.9);
			font-weight: bold;
			line-height: 48rpx;
			margin-bottom: 32rpx;
		}

		.article-content {
			background-color: #FFF;
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0.6);
			line-height: 44rpx;
		}
	}
</style>